<template>
    <div class="OrderDetails">
        <ul class="ul_list">
            <li>
                <p>订单进度：<span>已发货</span></p>
                <p>顺丰快递<span>52SF444554444</span></p>
            </li>
            <li>
               <div>
                 <p>收货人：<span>老王</span> <span>13242736980</span></p>
                <p>收货地址：<span>广州市黄浦区科学城科汇金谷4街二号</span></p>
                 
               </div> 
            </li>
            <li>
              
                    <img src="https://i1.mifile.cn/a1/pms_1527684990.93616987!220x220.jpg" alt="">
                    <div>
                        <p>iPhone XR 256G 国行</p>
                        <p>数量：1</p>
                        <p>XXXX抽奖活动中奖</p>
                    </div>
          

            </li>
            <li>
              <p>订单信息：</p> 
                <p>订单号：<span>20180910254625878</span></p>
                <p>获得方式：<span>抽奖</span></p>
                <p>支付数量：<span>抽奖</span></p>
                <p>中奖时间：<span>2018-09-16</span></p>
              
            </li>
            <li>
                 <p>联系我们：</p> 
                <p>客服电话：<span>020-552266</span></p>
                <p>客服QQ：<span>36254254</span></p>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped lang="less">
@import "../style/base.less";

    .OrderDetails{
        padding: 24/@px;
    background: #fff;
        .ul_list{
            li{
                border-bottom: 1px solid #e5e5e5;
                padding-top: 24/@px;
                padding-bottom: 24/@px;
                font-size: 30/@px;
                color: #333;
             
            }
            li:first-child{
                 padding-top: 4/@px;;
                p:first-child{
                    span{
                        color:#ff0032;
                    }
                }
            }
            li:nth-child(3){
                display: flex;
                img{
                    width: 180/@px;
                    height: 180/@px;
                    margin-right: 28/@px;
                }
                div{
                    p:nth-child(2){
                        margin-top: 30/@px;
                    }
                    p:nth-child(3){
                        color: #ff0032;
                    }
                }

            }
             li:nth-child(4){
                 p:first-child{
                     font-size: 34/@px;
                 }
             }
             li:nth-child(5){
                 border-bottom: none;
                 p:first-child{
                     font-size: 34/@px;
                 }
             }

        }

    }
</style>